<template>
  <!-- 隐患整改 -->
  <div class="hiddendangerrectification">
    <basic-container>
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :permission="permissionList"
        v-model="form"
        ref="crud"
        @search-change="searchChange"
        @search-reset="searchReset"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
      >

        <!-- 现场照片表格自定义 -->
        <template slot="xczp" slot-scope="scope">
          <div class="ope_row_div">
            <span v-if="scope.row['xczp'] === '' || scope.row['xczpFileList'].length === 0">-</span>
            <el-button 
              v-else 
              type="text" 
              icon="el-icon-picture-outline" 
              size="mini" 
              @click="handleViewPhoto(scope.row)">
              查看
            </el-button>
          </div>
        </template>

        <!-- 隐患整改表格自定义 -->
        <template slot="improveSetting" slot-scope="scope">
          <div>
            <el-button 
              v-if="userId === scope.row['zgfzr'] && scope.row['sftg'] !== 2"
              type="success"
              size="mini"
              @click="handleImprove(scope.row)">
              整改设置
            </el-button>
            <span v-else>-</span>
          </div>
        </template>

        <!-- 审核表格自定义 -->
        <template slot="examine" slot-scope="scope">
          <div>
            <el-button 
              v-if="userId === scope.row['zgshren'] && scope.row['sftg'] === 1 && scope.row['zgjg'] !== '' && scope.row['zgjg'] !== undefined && scope.row['zgjg'] !== null"
              type="primary"
              size="mini"
              @click="handleExamine(scope.row)">
              审 核
            </el-button>
            <span v-else>-</span>
          </div>
        </template>

      </avue-crud>

      <!-- 弹窗：图片 -->
      <viewpicture 
        :localPicBox="localPicBox" 
        :localPictures="localPictures" 
        :viewPicTitle="viewPicTitle" 
        @confirmViewPicture="confirmViewPicture" 
        @handleClosePicBox="handleClosePicBox">
      </viewpicture>

      <!-- 弹窗：隐患整改、审核 -->
      <el-dialog 
        :title="dialogTitle"
        append-to-body
        :visible.sync="updateDialog"
        :close-on-click-modal="false" 
        :before-close="closeUpdateDialog"
        width="60%"
        class="update_dialog"
      > 
        <avue-form 
          ref="updateForm" 
          v-model="updateObj" 
          :option="updateOption" 
          @submit="confirmExamineOrImprove"
        >
          <template slot="menuForm">
            <el-button 
              size="small"
              icon="el-icon-close"
              @click="closeUpdateDialog()">
              取 消
            </el-button>
          </template>
        </avue-form>
      </el-dialog>

    </basic-container>
  </div>
</template>

<script>
import {
  getList,
  update,
  examineDanger
} from "@/api/hiddendangemanage/hiddendangerrectification";
import { mapGetters } from "vuex";
import { getDeptTree } from "@/api/system/dept";
import viewpicture from '../saferisk/components/viewpicture.vue';
import { optionColumn, updateOptionColumn } from "./constant/hiddendangerrectification.js";

const USERID = JSON.parse(localStorage.getItem("saber-userInfo")).content.user_id;

export default {
  components: { 
    viewpicture
  }, 
  data() {
    return {
      userId: USERID,
      // 列表
      form: {},
      query: {},
      data: [],
      loading: true,
      page: {
        pageSize: this.$pageSize,
        currentPage: 1,
        total: 0
      },
      option: {
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchSpan: 5,
        searchMenuSpan: 4,
        border: true,
        index: false,
        selection: false,
        viewBtn: true,
        refreshBtn: true,
        columnBtn: false,
        dialogClickModal: false,
        menuWidth: 100,
        column: optionColumn
      },
      // 弹窗：查看图片
      localPicBox: false,
      localPictures: [],
      viewPicTitle: "",
      // 弹窗：隐患整改、审核
      updateDialogType: "",
      examineStr: "EXAMINE",
      improveStr: "IMPROVE",
      dialogTitle: "",
      updateDialog: false,
      updateObj: {},
    };
  },
  computed: {
    ...mapGetters(["permission"]),

    // 按钮权限
    permissionList() {
      return {
        addBtn: false,
        viewBtn: true,
        delBtn: false,
        editBtn: false
      };
    },

    // 弹窗：整改设置审核
    updateOption() {
      return {
        size: "small",
        submitText: "确 定",
        mockBtn: false,
        printBtn: false,
        emptyBtn: false,
        column: updateOptionColumn
      }
    }
  },
  mounted() {
    this.initData();
  },
  methods: {

    // 初始化页面
    initData() {
      var tenantId = JSON.parse(localStorage.getItem("saber-tenantId")).content;
      getDeptTree(tenantId).then(res => {
        const zgdxColumn = this.findObject(this.updateOption.column, "zgdx");
        zgdxColumn.dicData = res.data.data;
      }).then(() => {
        this.onLoad(this.page);
      });
    },

    // 清空搜索条件
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },

    // 搜索条件改变
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },

    // 更换页数
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page);
    },

    // 更换每页显示数量
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page);
    },

    // 刷新
    refreshChange() {
      this.onLoad(this.page, this.query);
    },

    // 加载数据
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },

    /**
     * 弹窗：图片
    */

    // 查看现场照片
    handleViewPhoto(row) {
      this.localPictures = row.xczpFileList;
      this.localPicBox = true;
      this.viewPicTitle = "现场照片";
    },

    // 确认照片
    confirmViewPicture() {
      this.localPictures = [];
      this.localPicBox = false;
      this.viewPicTitle = "";
    },

    // 关闭弹窗
    handleClosePicBox() {
      this.confirmViewPicture();
    },

    /**
     * 弹窗：隐患整改、审核
    */

    // 打开隐患整改弹窗
    handleImprove(row) {
      this.updateObj = this.formatUpdateObj(row);
      this.updateDialogType = this.improveStr;
      this.dialogTitle = "整改设置";
      this.updateDialog = true;
      this.updateOption.column.forEach(item => {
        if(item.prop === "sftg" || item.prop === "spyj") {
          item.display = false;
        } else {
          item.disabled = false;
        }
      });
    },

    // 打开审核弹窗
    handleExamine(row) {
      this.updateObj = this.formatUpdateObj(row);
      this.updateDialogType = this.examineStr;
      this.dialogTitle = "审核";
      this.updateDialog = true;
      this.updateOption.column.forEach(item => {
        if(item.prop === "sftg" || item.prop === "spyj") {
          item.display = true;
        } else {
          item.disabled = true;
        }
      });
    },

    // 获取弹窗数据
    formatUpdateObj(row) {
      var data = {};
      for(var key in row) {
        data[key] = row[key];
      }
      return data;
    },

    // 点击确定按钮
    confirmExamineOrImprove() {
      if(this.updateDialogType === this.examineStr) {
        this.confirmExamine();
      } else if(this.updateDialogType === this.improveStr) {
        this.confirmImprove();
      }
    },

    // 确定审核
    confirmExamine() {
      this.$refs.updateForm.validate((vaild,done)=>{
        if(vaild){
          examineDanger(this.updateObj.id, this.updateObj.sftg, this.updateObj.spyj).then(res => {
            if(res.data.success) {
              this.closeUpdateDialog();
              this.page.currentPage = 1;
              this.onLoad(this.page);
            }
          });
          done();
        }
      })
    },

    // 确定整改设置
    confirmImprove() {
      this.$refs.updateForm.validate((vaild,done)=>{
        if(vaild){
          var improveSettingObj = this.formatImproveSettingObj(this.updateObj);
          update(improveSettingObj).then(res => {
            if(res.data.success) {
              this.closeUpdateDialog();
              this.page.currentPage = 1;
              this.onLoad(this.page);
            }
          });
          done();
        }
      })
    },

    // 获取整改设置时所需数据
    formatImproveSettingObj(row) {
      var data = {
        id: row.id,
        hiddenDangerInfoId: row.hiddenDangerInfoId,
        zgfs: row.zgfs,
        fzzgbm: row.fzzgbm,
        zgfzr: row.zgfzr,
        xgfj: row.xgfj,
        zgbt: row.zgbt,
        zgdx: row.zgdx,
        zgdbh: row.zgdbh,
        bhgys: row.bhgys,
        zyfl: row.zyfl,
        zgxjr: row.zgxjr,
        rwglfl: row.rwglfl,
        yqzgwcrq: row.yqzgwcrq,
        fshj: row.fshj,
        zgshren: row.zgshren
      };
      return data;
    },

    // 关闭、取消审核&整改设置弹窗
    closeUpdateDialog() {
      this.updateObj = {};
      this.updateDialogType = "";
      this.dialogTitle = "";
      this.updateDialog = false;
    }

  }
};
</script>

<style lang="scss" scpoed>
.hiddendangerrectification {
  .avue-crud {
    .avue-crud__search {
      .avue-form__row {
        .el-form-item {
          .el-form-item__label {
            width: 90px !important;
          }

          .el-form-item__content {
            margin-left: 90px !important;
          }
        }
      }
    }
  }

  .ope_row_div {
    .el-button {
      font-size: 12px;
    }
  }
}

.update_dialog {
  .avue-form__row {
    .el-form-item {
      .el-form-item__label {
        width: 110px !important;
      }
      
      .el-form-item__content {
        margin-left: 110px !important;
      }
    }
  }

  .avue-form__menu--center {
    text-align: center;
  }
}
</style>